<!-- 交互详情 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>交互详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="interaction-details">

      <el-card class="interaction-card">
        <div slot="header" class="clearfix">
          <span>交互详情</span>
          <el-button type="text" @click="goBack">返回</el-button>
        </div>
        <div v-if="interaction">
          <el-row :gutter="20">
            <el-col :span="12">
              <strong>日期:</strong>
              <span>{{ interaction.date }}</span>
            </el-col>
            <el-col :span="12">
              <strong>用户:</strong>
              <span>{{ interaction.user.name }}</span>
            </el-col>
            <el-col :span="12">
              <strong>用户Email:</strong>
              <span>{{ interaction.user.email }}</span>
            </el-col>
            <el-col :span="12">
              <strong>用户头像:</strong>
              <span>{{ interaction.user.avatarUrl }}</span>
            </el-col>
          </el-row>

          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="问题" name="question">
              <el-input v-model="interaction.question"   :rows="10" type="textarea" ></el-input>
            </el-tab-pane>
            <el-tab-pane label="响应回复" name="response">
              <el-input v-model="interaction.response.text" :rows="10"  type="textarea"></el-input>
            </el-tab-pane>
            <!-- 其他tabs -->
          </el-tabs>

          <el-row class="other-info" :gutter="20">
            <el-col :span="12">
              <strong>满意度:</strong>
              <el-tag>{{ interaction.satisfaction }}</el-tag>
            </el-col>
            <el-col :span="12">
              <strong>满意度进度:</strong>
              <el-progress :percentage="interaction.percentage"></el-progress>
            </el-col>
          </el-row>

          <el-row class="action-row" :gutter="20" justify="end">
            <el-button type="primary" @click="editInteraction">编辑</el-button>
            <el-button type="danger" @click="deleteInteraction">删除</el-button>
          </el-row>
        </div>
        <div v-else>
          <el-alert type="warning" title="无交互数据" description="尚未加载到交互数据。" show-icon></el-alert>
        </div>
      </el-card>
    </div>
  </div>
</template>  
  
<script>
import { login } from '../../api/userMG';
// import { getInteraction } from '../../api/userMG'
export default {
  data() {
    return {
      interaction:null, // 用于存储交互数据的对象  
      activeTab: 'question', // 当前激活的tab 
    };
  },
  created() {
    this.getDate();
    console.log("8888");
  },
  methods: {
    getDate() {
      //测试环境 模拟数据
      this.interaction = {
        id: 1, // 交互的唯一标识符  
        date: '2023-04-01T12:00:00Z', // ISO 8601格式的交互日期和时间  
        user: {
          id: 101,
          name: 'John Doe',
          email: 'johndoe@example.com',
          avatarUrl: 'https://example.com/avatar.png' // 用户头像URL  
        },
        question: '我购买的产品出现了故障，应该如何处理？', // 用户的问题或请求  
        response: {
          text: '非常抱歉听到您的产品出现故障。请您联系我们的客服团队，他们将为您提供进一步的帮助和解决方案。', // 对用户问题的响应文本  
          date: '2023-04-01T13:30:00Z', // 响应的日期和时间  
          agent: {
            id: 201,
            name: 'Jane Smith',
            email: 'janesmith@example.com'
          } // 响应的客服人员信息  
        },
        attachments: [ // 相关的附件列表  
          {
            id: 'attachment1',
            url: 'https://example.com/attachment1.jpg',
            type: 'image',
            description: '故障产品的照片'
          },
          {
            id: 'attachment2',
            url: 'https://example.com/log.txt',
            type: 'text',
            description: '产品日志文件'
          }
        ],
        satisfaction: 4 ,// 用户满意度评级，假设是1到5的整数 
        percentage: '80',
        tags: ['产品故障', '客服响应'], // 与交互相关的标签列表  
        status: 'resolved', // 交互的状态，比如'pending', 'resolved', 'closed'等  
      },
      console.log(this.interaction,"this.interaction");

      //正式环境使用接口请求数据
      getInteraction(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.interaction = res.data
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    
    goBack() {
      this.$router.go(-1); // 返回上一页  
    },
    async editInteraction() {
      // 处理编辑交互的逻辑  
      try {  
      const formData = {  
        question: this.interaction.question,  
        response: this.interaction.response,  
        satisfaction: this.interaction.satisfaction,  
      };  
  
      // 发送PUT请求到后端API来更新交互  
      const response = await this.$api.put(`/interactions/${this.interaction.id}`, formData);  
  
      // 检查响应状态，并更新本地数据（如果需要）  
      if (response.data && response.data.success) {  
        // 假设后端返回了更新后的交互详情  
        this.interaction = { ...this.interaction, ...response.data.interaction };  
        // 显示成功消息或进行其他操作  
        this.$message({ message: '交互信息已更新成功', type: 'success' });  
      } else {  
        // 处理错误情况  
        this.$message.error('更新交互信息时出错');  
      }  
    } catch (error) {  
      // 处理网络错误或其他异常  
      console.error('更新交互信息时发生错误:', error);  
      this.$message.error('网络错误，请稍后再试');  
    }  
    },
    async deleteInteraction() {
      // 处理删除交互的逻辑 
      try {  
      const interactionId = this.interaction.id;  
  
      // 发送DELETE请求到后端API来删除交互  
      // 假设你有一个API服务来处理请求，这里用this.$api来表示  
      const response = await this.$api.delete(`/interactions/${interactionId}`);  
  
      // 检查响应状态  
      if (response.data && response.data.success) {  
        // 删除成功后，你可以清除当前交互对象或跳转到其他页面  
        this.interaction = null; // 或者你可以重定向到交互列表页面  
        this.$message({ message: '交互已成功删除', type: 'success' });  
      } else {  
        // 处理删除失败的情况  
        this.$message.error('删除交互时出错');  
      }  
    } catch (error) {  
      // 处理网络错误或其他异常  
      console.error('删除交互时发生错误:', error);  
      this.$message.error('网络错误，请稍后再试');  
    }   
    },
    handleTabClick(tab, event) {
      // 处理tab点击事件
      // 阻止标签页默认的点击事件行为，比如跳转链接  
    event.preventDefault();  
      // 存储当前激活的标签页的标识  
      this.activeTab =  tab.name;
        
      // 清除所有标签页的激活状态  
      this.tabs.forEach(t => {  
        t.active = false;  
      });  
      // 设置被点击的标签页为激活状态  
      tab.active = true;    
    },
  },

};  
</script>  
  
<style scoped>
.interaction-details{
   margin-top: 30px;
   height: 80vh;
}

.interaction-details::v-deep .el-tabs__item {
  padding: 0px;
  width: 170px;
  text-align: center;
  }
  .el-tabs__item {
  text-align: center;
}
.el-tabs__item.is-top:last-child {
  padding: 0 20px;
}
.order-detail {
  margin-top: 30px;

}

.text-center {
  margin-top: 20px;
}
.el-col{
  margin-top: 20px;
  margin-bottom: 20px;
}
.order-detail-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.order-summary {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.order-summary dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.order-summary dt,
.order-summary dd {
  flex: 1 0 50%;
  margin: 0;
  padding: 5px 0;
}

.order-summary dt {
  font-weight: bold;
}

.order-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.order-items th,
.order-items td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.order-items th {
  background-color: #f2f2f2;
}

.order-actions {
  margin-top: 20px;
}

.order-actions button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;
}

.order-actions button:hover {
  background-color: #45a049;
  /* Dark Green */
  color: white;
}
</style>

 
 